<template>
    <div class="module-page">
        <div class="header flex-row">
            <el-radio-group v-model="viewType" size="small" class="left-btn">
                <el-radio-button label="user">用户</el-radio-button>
<!--                <el-radio-button label="用户组"></el-radio-button>-->
                <el-radio-button label="role">角色</el-radio-button>
<!--                <el-radio-button label="操作"></el-radio-button>-->
            </el-radio-group>
            <div class="flex1"></div>
            <div class="right-btn">
<!--                <el-select class="company" size="small" v-model="select" placeholder="用户角色">-->
<!--                    <el-option-->
<!--                            v-for="item in options"-->
<!--                            :key="item.value"-->
<!--                            :label="item.label"-->
<!--                            :value="item.value">-->
<!--                    </el-option>-->
<!--                </el-select>-->
                <el-button v-if="viewType === 'user'"
                           style="margin-left: 10px"
                           type="primary"
                           @click="addUser"
                           size="small">新增用户</el-button>
                <el-button v-else
                           style="margin-left: 10px"
                           type="primary"
                           @click="addRole"
                           size="small">新增角色</el-button>
            </div>
        </div>
        <user-list ref="userList" v-if="viewType === 'user'"></user-list>
        <role-list ref="roleList" v-else></role-list>
    </div>
</template>

<script>
import userList from './userList'
import roleList from './roleList'
export default {
  name: 'manage',
  components: {
    userList,
    roleList
  },
  data() {
    return {
      viewType: 'user',
      select: '',
      options: [],
      tableData: []
    }
  },
  methods: {
    addUser() {
      this.$refs.userList.editUser({
        password: '654321',
        realName: '测试用户2',
        roleIdList: [],
        username: 'ceshi2'
      })
    },
    addRole() {
      this.$refs.roleList.editRole({
        roleName: '',
        menuCodeList: []
      })
    }
  }
}
</script>

<style lang="scss" scoped>
    .module-page {
        padding: 27px;
        width: 100%;
        box-sizing: border-box;
        overflow: auto;
        .header {
            height: 69px;
            position: relative;
        }
    }
</style>